<template>
  <div>
    <div id="demo1"></div>
    <!-- <button type="button" class="btn" @click="getEditorData">获取当前内容</button> -->
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from 'wangeditor';
import { uploadFile } from '@/api/knowledgeBaseApi.js';
export default {
  data() {
    return {
      editor: null
    };
  },
  props: ['editorValue'],
  mounted() {
    this.initData();
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html();
      alert(data);
    },
    initData() {
      const editor = new wangEditor('#demo1');
      // editor.config.uploadImgServer = '/upload-img'; //上传图片地址
      editor.config.customUploadImg = (file, insert) => {
        //上传图片
        this.files = file[0];
        // FormData 对象
        let formData = new FormData();
        // 文件对象
        formData.append('file', this.files);
        uploadFile(formData).then(res => {
          insert(res.data.path); //插入编辑器
        });
      };

      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = newHtml => {
        this.editorData = newHtml;
        this.$emit('onEditorValue', newHtml);
      };
      // 创建编辑器,先销毁在创建
      editor.destroy();

      editor.create();
      this.editor = editor;
      editor.txt.html(this.editorValue);
      document.querySelector('.w-e-text-container').style.height = '220px';
      document.querySelector('.w-e-text').style.minHeight = '0px';
    },
    resetData() {
      this.editor = null;
      this.initData();
    },
    txtHtml(data) {
      console.log(data, '查看信息');
      this.editor.txt.html(data);
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  }
};
</script>

<style lang="scss" scoped>
::v-deep ol {
  list-style: auto !important;
}
::v-deep ul {
  list-style: disc !important;
}
</style>
<style>
/* .w-e-toolbar {
  z-index: 1 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
} */
</style>
